<template>
	<view class="">

		<cu-custom bgColor="bg-white" :isBack="true" textRight="true" type="custom-recuit">
			<block slot="backText" class="titilestyle">
				<view class="titilestyle">
					{{title}}
				</view>

			</block>
		</cu-custom>
		<mescroll-body bottom="20%" height="80%" class="mescroll-body" ref="mescrollRef" @init="mescrollInit"
			@down="downCallback" @up="upCallback">


			<view class="content ">
	
				<view class="banner">
					<image :src="res+'/static/cloudClassroom/banner.png'" mode=""></image>
				</view>




				<view class="applist flex justify-between">
					<view class="item middle " v-for="(item,index) in app" :key="index"
						:style="{backgroundColor:item.bgColor}" @click="jumpfn(item.path)">
				
						<image :src="res+item.icon" mode=""></image>
						{{item.name}}

					</view>

				</view>

				<view class="order-box ">
					<image :src="res+'/static/laundry/xiyiji.png'" mode=""></image>
				</view>


				<view class="list " v-if="list">
					<view class="top-item ">
						附近洗衣机 <text class="text-total">已为您找到最近的 <text class="text-blue ">
								{{list.length}}</text>台洗衣机</text>
					</view>


					<view class="item-box flex" v-for="(item,i) in list" :key="i">
						<view class="left  basis-xs">
							<image class="logo-box " :src="res+'/static/laundry/xiyi.png'" mode="widthFix"></image>

						</view>
						<view class="right  basis-xl flex align-stretch flex-direction">
							<view class="top">
								<view class="">
									{{item.name}} <text class="sno">No.{{item.sno}}</text>
								</view>
								<view class="label-box">
									{{item.address}}
								</view>
							</view>

							<view class="bottom flex justify-between  ">
								<view class="left">
									<text class="text-blue" v-if="item.status==0">空闲中</text>
									<text class="text-gray" v-if="item.status==1">占用中</text>
								</view>

								<view class="right">
									<view class="item-btn round" @click="jumpTo('./downOrder?id='+item.id)"
										v-if="item.status==0">
										立即使用
									</view>
									<view class="text-gray" v-else>
										预估<text class="text-blue">{{changeTime(item.time)}}</text>分钟后可使用
									</view>
								</view>
							</view>


						</view>
					</view>




				</view>

			</view>


		</mescroll-body>


	</view>
</template>

<script>
	import {
		getData
	} from "@/static/laundry/api.js"
	import MescrollBody from "@/uni_modules/mescroll-uni/components/mescroll-body/mescroll-body.vue"
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	
	export default {
		mixins: [MescrollMixin],
		components: {
			MescrollBody,
		},
		data() {
			return {
				title: "洗衣",
				tabIndex: 0,
				res: this.apiHost + "/static/otherApp/",
				list: null,
				app: [{
						name: "扫码洗衣",
						icon: "/static/laundry/saoma.png",
						bgColor: "#4E73FF",
						path: "zhibo"
					},
					{
						name: "我的订单",
						icon: "/static/laundry/order.png",
						bgColor: "#01D4CD",
						path: "zhibo"
					},
					{
						name: "跑腿代洗",
						icon: "/static/laundry/songhuo.png",
						bgColor: "#4884CC",
						path: "zhibo"
					}



				]

			}
		},
		methods: {
			changeTime(time) {
				return parseInt(time - Math.random() * 10)
			},

			changeTab(i) {
				this.tabIndex = i;
			},
			jumpfn() {
				uni.showToast({
					title: "暂未开放",
					icon: "none"
				})
			},
			/**
			 * 
			 */
			jumpTo(path) {
				uni.navigateTo({
					url: path
				})
			},
			upCallback(page) {
				getData(page.num, page.size).then(curPageData => {
					console.log(curPageData)
					this.mescroll.endSuccess(curPageData.length);
					if (page.num == 1) this.list = [];
					this.list = this.list.concat(curPageData);
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},






		}







	}
</script>

<style lang="scss" scoped>
	.content {
		$w: calc(100vw*(670/750));
		$marginLR: calc(100vw*(40/750));

		width: $w;


		.search {

			margin-left: calc(100vw*(24/750));
			width: calc(100vw*(702/750));
			background: #FFFFFF;
			box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.05);
			border-radius: 20rpx;
			height: calc(100vw*(72/750));
			padding: 0 42rpx 0 42rpx;

			input {
				font-size: 24rpx;
			}

			.cuIcon-search {
				font-size: 38rpx;
			}


			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;

		}

		.banner {
			margin: 0 $marginLR;
			width: $w;
			height: calc(100vw*(200/750));
			background: #205BB8;
			border-radius: 20rpx;
			margin-top: 20rpx;

			image {
				width: $w;
				height: calc(100vw*(200/750));
			}
		}

		.order-box {
			margin: 40rpx $marginLR 0 $marginLR;
			width: $w;
			height: calc(100vw*(440/750));
			// background: #BEDBFD;
			border-radius: 20rpx;

			image {
				width: inherit;
				height: inherit;
			}
		}

		.applist {
			margin: 0 $marginLR;
			width: $w;
			box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.05);
			margin-top: 20rpx;

			.item {
				border-radius: 20rpx;
				width: calc(100vw*(210/750));
				height: calc(100vw*(100/750));

				image {
					width: calc(100vw*(29/750));
					height: calc(100vw*(27/750));
					margin-right: 11rpx;
				}
			}

			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			;
		}

		.list {
			width: $w;
			margin: 20rpx $marginLR;
			font-family: PingFang SC;

			.top-item {

				padding: 30rpx 30rpx 10rpx 30rpx;
				font-size: 32rpx;
				font-weight: 800;
				color: #333333;

				.text-total {
					font-size: 24rpx;
					font-weight: 500;
					color: #999999;
					margin-left: 34rpx;
				}
			}

			.item-box {
				background: #FFFFFF;
				margin-top: 20rpx;
				box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.05);
				border-radius: 20rpx;
				height: calc(100vw*(200/750));
				padding: 25rpx;

				.left {
					.logo-box {
						width: 100%;
						height: 100%;
					}

				}

				.right {
					padding-left: 38rpx;

					.top {
						font-size: 28rpx;
						font-weight: 800;
						color: #333333;

						.sno {
							padding-left: 31rpx;
							font-weight: 500;
							color: #999999;
						}

						.label-box {
							font-weight: 500;
							color: #999999;
							margin-top: 18rpx;
						}
					}

					.bottom {
						margin-top: 23rpx;
						min-height: calc(100vw*(50/750));

						.item-btn {
							padding: 12rpx 23rpx;
							background: #1270E0;
							font-weight: 500;
							color: #FFFFFF;
						}
					}


				}

			}

		}

	}
</style>
